<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery属性操作</title>
    <script src="../jquery/jquery.v3.7.1.js"></script>
</head>
<body>
    <div><a href="https://www.runoob.com/jquery/event-mouseenter.html" data-index="223sss">jquery文档</a></div>
    <p>数据缓存 data()</p>
    <div>
        <p>jQuery属性操作：</p>
        <p>1、获取元素固有属性值 prop()：</p>
        <p>语法：prop('属性')</p>
        <p>2、设置属性值 prop()：</p>
        <p>语法：prop('属性'，'属性值')</p>
        <p>3、设置或获取元素的自定义属性 attr()：</p>
        <p>数据缓存 data()：data()方法可以在指定元素上存取数据，并不会修改 DOM元素结构，一旦页面刷新，之前存放的数据将被移除。也可以使用 data()获取自定义属性，而返回的是数字类型。</p>
    </div>
    <script>
        $(function(){
            //1、获取元素固有属性
            var aProperty = $('a').prop('href');
            console.log('href:',aProperty);
            //2、设置元素固有属性
            $('a').prop('href','https://www.runoob.com/jquery/jquery-events.html')
            aProperty = $('a').prop('href');
            console.log('href:',aProperty)
            //3、获取元素自定义属性
            var index = $('a').attr('index');
            console.log('index:',index)
            var dataIndex = $('a').attr('data-index')
            console.log(dataIndex)
            //4、数据缓存 data()，数据是存在内存中的，可以当作一个变量来看。不会在 DOM中显示。
            var data = $('p:first').data('uname','andy')
            console.log(data)
            var data2 = $('a').data('index')
            //5、这个方法获取 data-index自定义属性时，不用写 data-，而且返回的不是对象。
            console.log('data2:',data2)
        })
    </script>
</body>
</html>